<template>
  <section id="kline">
    <div class="top">
  
      <div v-if='$store.state.symbolList.length' class="info clearfix">
        <div class="pull_left name">
          <div v-if='lists.goods_name'>{{lists.goods_name}}</div>
          <div v-else>--</div>
          <div  v-if='lists.goods_code' >{{lists.goods_code}}</div>
          <div v-else>--</div>
        </div>
        <div class="pull_left num ">
          <div :style="lists.inAndOut.zfType!=2 || 1 ? 'color:#AFB8DB':''" :class="{red:lists.inAndOut.zfType==1,green:lists.inAndOut.zfType==2}" >{{lists.inAndOut.new_price}}</div>
          <div>
            <span  :class="countUpsAndDowns(
               lists.inAndOut.new_price,
               lists.yest_close_price)>=0 ? 'red':'green'"  
            >
            {{countUpsAndDowns(lists.inAndOut.new_price,lists .yest_close_price)}}
            </span>
            <span :class="countUpsAndDowns(
               lists.inAndOut.new_price,
               lists.yest_close_price)>=0 ? 'red':'green'" 
            > 
               {{ratioCalculate(lists.new_price, lists.yest_close_price)}}
               </span>
          </div>
        </div>
        <div class="pull_left today_open">
          <div>今开</div>
          <div>{{lists.today_open_price}}</div>
        </div>
        <div class="pull_left yes_close">
          <div>昨收</div>
          <div>{{lists.yest_close_price}}</div>
        </div>
        <div class="pull_left highest">
          <div>最高</div>
          <div>{{lists.today_high_price}}</div>
        </div>
        <div class="pull_left lowest">
          <div>最低</div>
          <div>{{lists.today_low_price}}</div>
        </div>
        <div class="biggest pull_right">
            <Tooltip   v-if='fullBol' content="退出全屏">
                <img @click="fullscreen(1)" src="../assets/image/queiFull.png" alt="" width="20" height="20">
           </Tooltip>
            <Tooltip v-else content="全屏">
                <img @click="fullscreen()"  src="../assets/image/biggest.png" alt="" width="20" height="20">
           </Tooltip>
        </div>
      
        <div v-show='!fullBol'   @click="$emit('lookAttr',true)" class="pull_right contract">
           <Tooltip content="合约属性">
             <img src="../assets/image/contract.png" alt="" width="19" height="21">
          </Tooltip>

        </div>
      </div>
      <div class="type">
        <ul>
          <li  v-for='btn in intervalBtn'   @click='tabIndex=btn.title'   :class="tabIndex==btn.title ? 'active':''"  >{{btn.title}}</li>
          <Tooltip offset='-5' placement='top' content="指标">
             <li @click='showIndicator'>
               <img src="../assets/image/index.png" alt="" width="15" height="13">
             </li>
           </Tooltip>

        </ul>
      </div>
    </div>
    <div class="bottom">
      <TradeView  ref='trade'></TradeView>
    </div>
  </section>
</template>
<script>
import TradeView from '../views/deal/TradeView/index'

export default {
  data() {
    return {
        tabIndex:'5分钟',
        fullBol:false,
        intervalBtn:[
            {title:'分时',resolution:'1',chartType:3},
            {title:'5分钟',resolution:'5',chartType:1},
            {title:'30分钟',resolution:'30',chartType:1},
            {title:'1小时',resolution:'60',chartType:1},
            {title:'日K',resolution:'1D',chartType:1},
            {title:'周K',resolution:'1W',chartType:1},
            {title:'月K',resolution:'1M',chartType:1},
       ],
    }
  },
  created(){
        // if(localStorage.getItem('pricescale')){
        //             let data=localStorage.getItem('pricescale')
        //             this.$store.state.pricescale={num:data}
        //   }
  },
  mounted(){
        //渲染图表库
      
          var _self=this;
          let el=document.getElementById('tv');
          let stock=document.getElementById('stockLines')
          if(el==null){
                 if(this.isIE()||this.isIE11()){
                     if(stock!=null) stock.removeNode(true)
                 }else{
                    if(stock!=null) stock.remove(true)
                 }
             var _src=document.createElement("script");
            _src.setAttribute("src","./static/tradeview/charting_library/charting_library.min.js");
            _src.setAttribute("id","tv");
            document.body.appendChild(_src);  
            _src.onload=function(){
                 _self.$refs.trade.init(_self.$store.state.traViewSymboId)
            }
          }else{
            _self.$refs.trade.init(_self.$store.state.traViewSymboId)
            //   if(this.isIE()||this.isIE11()){
            //       if(stock!=null) stock.removeNode(true)
            //   }else{
            //      if(stock!=null) stock.remove(true)
            //       el.remove(true)
            //   }
            //  var _src=document.createElement("script");
            // _src.setAttribute("src","./static/tradeview/charting_library/charting_library.min.js");
            // _src.setAttribute("id","tv");
            // document.body.appendChild(_src);  
            // _src.onload=function(){
            //      _self.$refs.trade.init(_self.$store.state.traViewSymboId)
            // }
          }    
        
  },
  methods:{
        // 全屏
        fullscreen(type=0){   
           let el=document.getElementById('kline')
           let parntHeig=el.offsetHeight;
           let parntWidth=el.offsetWidth;
           let num=0;
           //退出全屏
           const quitfull=()=>{
                    this.fullBol=false;
                    el.classList.remove('fullscreen')
                      if(document.mozCancelFullScreen!=null)  document.mozCancelFullScreen();
                      else if(document.webkitCancelFullScreen!=undefined) document.webkitCancelFullScreen();
                    document.webkitCancelFullScreen();
                    document.getElementById('trade-view').childNodes[0].style='display: block;width: 970px;height: 470px;'
           }
           //进入全屏
           const fn=()=>{
                if(el.mozRequestFullScreen!=null){
                  el.mozRequestFullScreen();
                }else if(el.webkitRequestFullScreen!=undefined){
                  el.webkitRequestFullScreen();
                }else{
                   this.$Message.error('该浏览器版本过低，不兼容全屏模式，请升级')
                   return;
                }
                  el.classList.add('fullscreen')
                  this.fullBol=true;
                  document.getElementById('trade-view').childNodes[0].style='display: block;width: 100%;height: 100%; position: absolute;'
           }

           if(type==1){
             quitfull();
             return;
           }
       

           el.classList['value'] == 'fullscreen' 
           ? 
           quitfull():fn();
          
          //Esc
           window.onresize =()=>{
               num++
               if(num==2){
                   quitfull();
               }
            }
        },
        // 指标对话 框
       showIndicator   (){  
             const $store= this.$store.state.traViewEvent;
             $store.showIndicator() ;
        },
        // 全屏
        // fullscreen (){
        //    const $store= this.$store.state.traViewEvent;
        //    $store.fullscreen();
        // },
         // 计算涨幅
        ratioCalculate(price, yclose) {
            let bili = 0;
            if (Number(yclose) != 0) {
              bili = (
                ((Number(price) - Number(yclose)) / Number(yclose)) *
                100
              ).toFixed(2);
      
              if (bili > 0) {
                bili = "+" + bili;
              }
            }
           return bili + "%";
      },
       //计算涨跌
      countUpsAndDowns(newsPrice,closePrice){
        var maxPrice=(Number(newsPrice)-Number(closePrice)).toFixed(this.getFloat(closePrice,true));
        maxPrice=maxPrice>=0?'+'+maxPrice:maxPrice;
        return maxPrice;
      },
      //获取小数位数
      getFloat(val, bol) {
        let _self = this;
        let _default = bol ? 0 : 1;
  
        let maxVal =
          String(val).split(".").length == 2
            ? val.split(".")[1].length
            : _default; // 最小变化单位
        return maxVal;
      },
      //ie ? 
      isIE(){
　       if(!!window.ActiveXObject || "ActiveXObject" in window){
　       　　return true;
　       }else{
　       　　return false;
　       }
       },
     isIE11(){
　       if((/Trident\/7\./).test(navigator.userAgent)){
　       　　return true;
　       }else{
　       　　return false;
　       }
      },
  },
  watch:{
      //切换商品周期
      tabIndex(){
        const $store=this.$store.state.traViewEvent;
          for (const iterator of this.intervalBtn) {
              if(iterator.title==this.tabIndex){
                 $store.setResolution(iterator.resolution,iterator.chartType)
              }
          }
      }
  },
  computed:{
        lists(){
            let symbol=this.$store.state;
            let tabIndex=[];
            let data=null;
            for(let i=0;i<symbol.symbolList.length;i++){
                  tabIndex.push(symbol.symbolList[i]['type_name']);
           }
      
            for(let i=0;i<tabIndex.length;i++){
                  let length=symbol.symbolObj[tabIndex[i]].goods_list.length;
                  let item=symbol.symbolObj[tabIndex[i]].goods_list;
                  for(let j=0;j<length;j++){
                      if( item[j].system_code == symbol.traViewSymboId){
                           data=item[j];
                           break;
                      }
                  }
            }
            this.$store.state.newPrice=data.inAndOut.new_price;
         
           return data
        }
  },
  components: {
    TradeView
  },
}
</script>

